import React, { useState, useEffect, useRef } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import axios from 'axios';
import { Modal, message } from 'antd';
import { Tabs } from 'react-vant'
import './css/login.model.css';

axios.defaults.baseURL = "http://127.0.0.1:3000/chen/";

const Login = () => {
  const navigate = useNavigate();
  const [isChecked, setIsChecked] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCaptchaVerified, setIsCaptchaVerified] = useState(false);
  const [userlist, setUserlist] = useState({
    username: '',
    password: ''
  });

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  // const handleOk = () => {
  //   if (isCaptchaVerified) {
  //     setIsModalOpen(false);
  //     message.success('验证成功');
  //   } else {
  //     message.error('请完成滑块验证');
  //   }
  // };

  const handleCancel = () => {
    setIsModalOpen(false);
    setIsCaptchaVerified(false);
    setSliderPosition(0);
    message.error('验证失败');
  };

  const handleLogin = async () => {
    if (userlist.username.length <= 0) {
      message.error('请输入账号');
      return false;
    }
    if (userlist.password.length <= 0) {
      message.error('密码不能为空');
      return false;
    }
    if (!isChecked) {
      message.error('请先勾选《用户隐私政策》');
      return false;
    }
    if (!isModalOpen) {
      showModal();
      return false;
    }
    // if (!isCaptchaVerified) {
    //   message.error('请完成滑块验证');
    //   return false;
    // }
    try {
      const { data: { code, data } } = await axios.post('login', {
        username: userlist.username,
        password: userlist.password
      });
      if (code === 200) {
        sessionStorage.setItem('username', data[0].username);
        sessionStorage.setItem('roleID', data[0].role);
        message.success('登录成功');
        // navigate('/zhu/navpage');
      } else if (code == 404) {
        message.error('用户不存在');
      } else if (code == 401) {
        message.error('账号密码错误')
      }
    } catch (error) {
      message.error('登录请求出错，请稍后重试');
    }
  };
  let toRoutes = (e) => {
    if (e == 0) {
      navigate('/chen/login/pwdlogin')
    } else if (e == 1) {
      navigate('/chen/login/phone')
    }
  }


  return (
    <div className='login_box'>
      <div className="login_item_box">
        <div className="item_box_left">
          <span className='title_span'>智慧养老后台管理系统</span>
          <p className='title_p'>智能健康信息及服务管理</p>
          <p className='title_p2'>实现资源的优化配置和管理，降低运营成本。</p>
          <img className='left_img' src="https://cdn8.axureshop.com/demo2024/2296569/images/%E7%99%BB%E5%BD%95/u828.png" alt="" />
        </div>
        <div className="item_box_right">
          <div className="titile_logo">
            <img className='project_logo' src="https://cdn8.axureshop.com/demo2024/2296569/images/%E7%99%BB%E5%BD%95/u825.svg" alt="" />
          </div>
          <p className='right_top_title'>欢迎登录</p>
          <div className='tabs_box'>
            <Tabs defaultActive={0} color='#43d4a4' onChange={(e) => toRoutes(e)}>
              <Tabs.TabPane title={`账号密码登录`}>
              </Tabs.TabPane>
              <Tabs.TabPane title={`验证码登录`}>
              </Tabs.TabPane>
             
            </Tabs>
            <Outlet></Outlet>
          </div>
        
         
     
        </div>

      </div>
    </div>
  );
};

export default Login;